<template>
  <div class="welcome">
    <el-card>
      <template #header>
        <span
          style="
            margin-left: 10px;
            cursor: pointer;
            font-size: 15px;
            color: #5298ff;
          "
          @click="goBack()"
          >返回</span
        >
        <span style="margin-left: 20px">项目信息</span>
      </template>
      <div class="flex">
        <div class="left">
          <p>项目名称：{{ projectInfo?.name }}</p>
          <p>项目类型：{{ projectInfo?.typeName }}</p>
          <p>项目年度：{{ projectInfo?.projectYear }}年</p>
          <p>项目所属单位：{{ projectInfo?.projectFactoryName }}</p>
          <p>项目管理员：{{ projectInfo?.projectLeaderName }}</p>

          <div class="bottom">
            <div
              class="info-box-target"
              v-if="projectInfo?.typeCode == 'A'"
              style="margin-left: 8px"
            >
              <span
                >{{ projectInfoData?.startWorkTotal }}/{{
                  projectInfoData?.sectionTotal
                }}
              </span>
              <p>开工数量/合同数量</p>
            </div>
            <div
              class="info-box-target"
              v-if="projectInfo?.typeCode == 'B'"
              style="margin-left: 8px"
            >
              <span>
                {{
                  projectInfoData?.projectUserTotal ||
                  projectInfoData?.projectBUserTotal
                }}
              </span>
              <p>项目成员</p>
            </div>
            <div class="flex-right">
              <div class="flex mt20">
                <div
                  class="info-box"
                  v-if="projectInfo?.typeCode == 'B1'"
                  style="margin-left: 8px"
                >
                  <span>
                    {{ projectInfoData?.startWorkTotal }}/{{
                      projectInfoData?.sectionTotal
                    }}
                  </span>
                  <p>开工数量/合同数量</p>
                </div>
                <!-- <div class="info-box" v-if=" projectInfo?.typeCode == 'B'" style="margin-left: 8px;">
              <span>{{ projectInfoData?.sectionTotal }}</span>
              <p>合同数量</p>
            </div> -->
                <div class="info-box" v-if="projectInfo?.typeCode == 'A'">
                  <span
                    >{{
                      (projectInfoData?.contractAmountTotal / 10000).toFixed(4)
                    }}/{{ projectInfo?.approvalAmount }}</span
                  >
                  <p>合同总金额/项目立项金额 (万元)</p>
                </div>
                <div
                  class="info-box"
                  v-if="
                    projectInfo?.typeCode == 'B' ||
                    projectInfo?.typeCode == 'B1'
                  "
                >
                  <span>{{ projectInfo?.approvalAmount }}(万元)</span>
                  <p>项目总预算</p>
                </div>
                <div
                  class="info-box"
                  v-if="
                    projectInfo?.typeCode == 'A' ||
                    projectInfo?.typeCode == 'B1'
                  "
                >
                  <span>{{ projectInfoData?.civilInsTotal }}</span>
                  <p>土建类总提单量</p>
                </div>
                <div
                  class="info-box"
                  v-if="
                    projectInfo?.typeCode == 'A' || projectInfo?.typeCode == 'B'
                  "
                >
                  <span>{{ projectInfoData?.deviceBillTotal }}</span>
                  <p>设备类总提单量</p>
                </div>
                <div
                  class="info-box"
                  v-if="
                    projectInfo?.typeCode == 'A' || projectInfo?.typeCode == 'S'
                  "
                >
                  <span>{{ projectInfoData?.serverDocumentTotal }}</span>
                  <p>服务成果文档</p>
                </div>
              </div>

              <div class="flex mt20">
                <div
                  class="info-box"
                  v-if="
                    projectInfo?.typeCode == 'A' ||
                    projectInfo?.typeCode == 'B1'
                  "
                >
                  <span>{{ projectInfoData?.projectUserTotal }}</span>
                  <p>项目成员</p>
                </div>
                <div
                  class="info-box"
                  v-if="
                    projectInfo?.typeCode == 'A' ||
                    projectInfo?.typeCode == 'B1'
                  "
                >
                  <span
                    >{{
                      parseFloat(
                        (projectInfoData?.civilCompleteTotal
                          ? projectInfoData?.civilCompleteTotal /
                            projectInfoData?.civilInsTotal
                          : 0) * 100
                      ).toFixed(2)
                    }}%</span
                  >
                  <p>土建类总完成率</p>
                </div>
                <div
                  class="info-box"
                  v-if="
                    projectInfo?.typeCode == 'A' || projectInfo?.typeCode == 'B'
                  "
                >
                  <span
                    >{{
                      parseFloat(
                        (projectInfoData?.deviceCompleteBillTotal
                          ? projectInfoData?.deviceBillTotal
                            ? projectInfoData?.deviceCompleteBillTotal /
                              projectInfoData?.deviceBillTotal
                            : 1
                          : 0) * 100
                      ).toFixed(2)
                    }}%</span
                  >
                  <p>设备类事项总完成率</p>
                </div>
                <div class="info-box">
                  <span>{{ projectInfoData?.projectDocumentTotal }}</span>
                  <p>项目总文档</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="right" v-if="projectInfo?.typeCode == 'A'">
          <section-pie></section-pie>
        </div>
      </div>
    </el-card>
    <br />
    <el-card
      v-if="projectInfo?.typeCode == 'A' || projectInfo?.typeCode == 'B1'"
    >
      <template #header> 土建类验收概览 </template>
      <div class="chart-box">
        <build-section-bar
          @clickItem="changeSection"
          :type="type"
          :typeCode="typeCode"
        ></build-section-bar>
      </div>
      <div
        class="flex"
        v-if="projectInfo?.typeCode == 'A' || projectInfo?.typeCode == 'B1'"
      >
        <div class="annular-chart-wrap">
          <div class="chartTitle">验收类型提单量</div>
          <div class="textBox">
            <div class="textTitle"><p>质量检查</p></div>
            <div class="textTitle"><p>材料验收</p></div>
            <div class="textTitle"><p>隐蔽验收</p></div>
            <div class="textTitleTarget">
              <p>施工设施<br />见证检测</p>
            </div>
            <div class="textTitle"><p>安全文明</p></div>
          </div>
          <section-annular-pie></section-annular-pie>
        </div>
      </div>
      <div
        class="flex"
        v-if="projectInfo?.typeCode == 'A' || projectInfo?.typeCode == 'B1'"
      >
        <div class="chartTitle2"><p>验收项排名</p></div>
        <div class="rank-chart-wrap">
          <div class="rank-box">
            <build-rank-bar
              accType="1"
              title="质量检查"
              color="#5298ff"
            ></build-rank-bar>
          </div>
          <div class="rank-box">
            <build-rank-bar
              accType="2"
              title="材料验收"
              color="#ffd765"
            ></build-rank-bar>
          </div>
          <div class="rank-box">
            <build-rank-bar
              accType="3"
              title="隐蔽验收"
              color="#ccc"
            ></build-rank-bar>
          </div>
          <div class="rank-box">
            <build-rank-bar
              accType="4"
              title="施工设施/见证检测"
              color="#ff6600"
            ></build-rank-bar>
          </div>
          <div class="rank-box">
            <build-rank-bar
              accType="5"
              title="安全文明"
              color="#5dd55d"
            ></build-rank-bar>
          </div>
        </div>
      </div>
    </el-card>
    <br />
    <el-card
      v-if="projectInfo?.typeCode == 'A' || projectInfo?.typeCode == 'B'"
    >
      <template #header><p>设备类事项概览</p> </template>
      <div class="flex">
        <div class="chart-wrap">
          <p>事项状态预览</p>
          <equip-state></equip-state>
        </div>
        <div class="chart-wrap">
          <div id="chart-wrap-target">
            <p>各阶段事项进度</p>
            <el-select
              v-model="sectionId"
              class="custom-select"
              v-if="projectInfo?.typeCode == 'A'"
            >
              <el-option
                class="default-option"
                v-for="item in sectionList"
                :label="item.sectionName"
                :key="item.id"
                :value="item.id"
              ></el-option>
            </el-select>
          </div>
          <div id="equip-container" v-loading="sectionProcess">
            <equip-section-process
              :sectionId="sectionId"
            ></equip-section-process>
          </div>
        </div>
        <div class="chart-wrap" v-if="projectInfo?.typeCode != 'B'">
          <p>各合同事项进度</p>
          <equip-process></equip-process>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
// import RateLine from "./charts/buildRateLine.vue";
import buildSectionBar from "./charts/buildSectionBar.vue";
// import buildTypeSum from "./charts/buildTypeSum.vue";
import equipState from "./charts/equipState.vue";
import sectionPie from "./charts/sectionPie.vue";
import sectionAnnularPie from "./charts/sectionAnnularPie.vue";
import equipProcess from "./charts/equipProcess.vue";
import equipSectionProcess from "./charts/equipSectionProcess.vue";
import buildRankBar from "./charts/buildRankBar.vue";
import { storageLocal } from "/@/utils/storage";
import { getProjectInfo } from "/@/api/dashboards";
import { getSection } from "/@/api/projects";
import { useRouter } from "vue-router";
import { getSectionInfo } from "/@/api/dashboards";

let projectInfo = storageLocal.getItem("projectInfo");
// 交互参数
let type = ref("");
let typeCode = ref("") as any;
let section = ref("");
let projectInfoData = ref({}) as any;
let sectionList = ref([]);
let sectionId = ref(""); //标段编号
let projectManageId = storageLocal.getItem("projectInfo")?.id;
let projectInfoSectionData = ref({});
const router = useRouter();

const changeSection = s => {
  section.value = s;
  sectionId.value = "123";
};

const goBack = () => {
  router.push(`/projects/Manage/space`);
};

// const changeType = t => {
//   type.value = t;
//   typeCode.value = "111";
// };
// 阿松大
//获取A类和B类土建项目项目信息
const getProjectTotalInfo = async () => {
  try {
    const { data } = await getProjectInfo({ projectManageId: projectInfo.id });
    projectInfoData.value = data;
  } catch (err) {
    console.log(err);
  }
};
getProjectTotalInfo();

//获取标段数量及占比
const getProjectSectionInfo = async () => {
  try {
    const { data } = await getSectionInfo({ projectManageId: projectInfo.id });
    projectInfoSectionData.value = data;
  } catch (err) {
    console.log(err);
  }
};

getProjectSectionInfo();

//获取标段列表
const sectionProcess = ref(false);
const getSectionList = async () => {
  try {
    sectionProcess.value = true;
    let param = {
      pageNum: 1,
      pageSize: 30,
      projectId: projectManageId,
      sectionType: "2"
    };
    const { code, data } = await getSection(param);
    if (code === 200) {
      sectionList.value = [
        { sectionName: "所有设备类阶段进度", id: "" }
      ].concat(data.list);
      // swiperImgListInit();
    }
  } catch (err) {
    console.log(err);
  } finally {
    sectionProcess.value = false;
  }
};

getSectionList();
</script>

<style lang="scss" scoped>
.bottom {
  display: flex;
  flex-direction: row;
  p {
    color: #696464;
  }
  .info-box-target {
    flex: 1;
    padding: 72px 10px;
    text-align: center;
    margin-left: 9px;
    margin-right: 10px;
    line-height: 25px;
    margin-top: 9px;
    background-color: rgb(241, 245, 254);
    border-radius: 6px;
    box-shadow: 0px 3px 8px 1px rgb(226, 224, 224);
    span {
      display: inline-block;
      line-height: 25px;
      font-size: 22px;
      font-weight: 600;
      margin-top: 7px;
    }
    p {
      font-size: 14px;
    }
  }
}
.flex {
  display: flex;
  width: 100%;
  p {
    margin-left: 8px;
  }
  &.mt20 {
    margin-top: 10px;
  }

  .flex-right {
    flex: 4;
  }

  .info-box {
    flex: 1;
    padding: 20px 12px;
    text-align: center;
    margin-right: 9px;
    line-height: 25px;
    background-color: rgb(241, 245, 254);
    border-radius: 6px;
    box-shadow: 0px 3px 8px 1px rgb(226, 224, 224);
    span {
      display: inline-block;
      line-height: 25px;
      font-size: 22px;
      font-weight: 600;
      margin-top: 7px;
    }
    p {
      font-size: 14px;
    }
  }
  .chart-wrap {
    flex: 1;
    margin-left: 10px;
    height: 320px;
    margin-bottom: 30px;
    padding: 10px;
    border-style: ridge;
    border-width: 1px;
    border-top: none;
    border-left: none;
    border-bottom: none;
    p {
      margin-top: 10px;
      margin-left: 13px;
    }
    #equip-container {
      width: 100%;
      height: 100%;
      margin-top: 18px;
    }
    #chart-wrap-target {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
  }

  .annular-chart-wrap {
    margin-top: 20px;
    flex: 1;
    height: 300px;
    width: 100%;
    border-style: ridge;
    border-width: 1px;
    border-color: #ccc;
    position: relative;
    margin-bottom: 20px;
  }

  .chartTitle {
    width: 150px;
    margin-left: 15px;
    margin-top: 12px;
  }

  .rank-chart-wrap {
    display: flex;
    flex: 1;
    height: 260px;
    width: 100%;
    margin-top: 30px;
    margin-left: -98px;

    .rank-box {
      border: 1px ridge #ccc;
      width: 19%;
      height: 240px;
      margin-left: 10px;
    }
  }
  .left {
    flex: 1;
    // #name-box {
    //   width: auto;
    //   line-height: 20px;
    //   padding: 10px 20px;
    //   background-color: rgb(241, 245, 254);
    // }
    & > p {
      padding: 10px 20px;
      line-height: 20px;
      margin-right: 8px;
      background-color: rgb(241, 245, 254);
      box-shadow: 0px 5px 6px 1px rgb(226, 224, 224);
      span {
        display: inline-block;
        line-height: 30px;
        font-size: 18px;
      }
    }
  }
  .right {
    width: 400px;
    height: 330px;
  }
}
.chart-box {
  width: 100%;
  height: 300px;
  border: 1px solid #ccc;
}
.textBox {
  width: 95%;
  display: flex;
  justify-items: center;
  justify-content: center;
  position: absolute;
  top: 53.5%;
  margin-left: -3px;
  left: 3.5%;
  .textTitle {
    flex: 1;
    text-align: center;
    p {
      font-size: 14px;
      font-weight: 600;
    }
  }

  .textTitleTarget {
    flex: 1;
    text-align: center;
    p {
      font-size: 14px;
      margin-top: -6px;
      font-weight: 600;
    }
  }
}
</style>
